<template>
  <div class="app-container">
    <div class="pannel">
      <el-form
        ref="departRef"
        :model="formInline"
        :rules="departRules"
        label-position="top"
        label-width="120px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区编号" prop="code">
              <el-input
                v-model="formInline.code"
                placeholder="请输入"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属仓库" prop="warehouseId">
              <el-select
                v-model="formInline.warehouseId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in houseName"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区名称" prop="name">
              <el-input v-model="formInline.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select
                v-model="formInline.temperatureType"
                placeholder="请选择"
                style="width: 106%"
              >
                <el-option
                  v-for="(item, index) in temperatureType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="formInline.bearingType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in bearing"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
              <el-select
                v-model="formInline.useType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in useType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="formInline.personName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formInline.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓库状态" prop="val">
              <el-radio-group v-model="val" @change="changeMax">
                <el-radio v-for="item, index in radioPay" :key="index" :label="item.label" :value="item.label" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="button">
            <div class="tac">
              <el-button @click="callBackFn">返回</el-button>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="height:178px" />
  </div>
</template>

<script>
import {
  addFactory,
  allFactory,
  addHouse,
  clickHouse,
  aclearHouse
} from '@/api'
// import { regionData, CodeToText } from 'element-china-area-data'
import { Message } from 'element-ui'
export default {
  name: 'Addhouse2',
  data() {
    return {
      disabled: null,
      id: '',
      val: '启用',
      // options: regionData, // 下拉城市
      formInline: {
        code: '',
        warehouseId: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        personName: '',
        phone: '',
        status: 1
      },
      // 表单校验
      departRules: {
        name: [
          { required: true, message: '库区名称不能为空', trigger: ['blur'] }
        ],
        warehouseId: [
          { required: true, message: '请选择仓库', trigger: ['blur'] }
        ],
        // locationCity: [{ required: true, message: '省/市/区不能为空', trigger: ['blur'] }],
        temperatureType: [
          { required: true, message: '请选择温度重类型', trigger: ['blur'] }
        ],
        bearingType: [
          { required: true, message: '请选择承重类型', trigger: ['blur'] }
        ],
        personName: [
          { required: true, message: '请填写负责人', trigger: ['blur'] }
        ],
        useType: [
          { required: true, message: '请填写用途属性', trigger: ['blur'] }
        ],
        phone: [
          { required: true, message: '负责人电话不能为空', trigger: ['blur'] }
        ]
      },
      locationCity: '',
      // 所属仓库
      houseName: [],
      // 温度类型
      temperatureType: [
        { value: 'CW', name: '常温' },
        { value: 'LC', name: '冷藏' },
        { value: 'HW', name: '恒温' }
      ],
      // 承重类型枚举
      bearing: [
        { value: 'ZX', name: '重型' },
        { value: 'QX', name: '轻型' },
        { value: 'OX', name: '中型' }
      ],
      // 用途属性枚举
      useType: [
        { value: 'RKHCQ', name: '入库缓存区' },
        { value: 'CKHCQ', name: '出库缓存区' },
        { value: 'CCQ', name: '存储区' },
        { value: 'FJQ', name: '分拣区' },
        { value: 'ZJQ', name: '质检区' }
      ],
      radioPay: [
        { label: '启用', value: '1' },
        { label: '停用', value: '0' }
      ]
    }
  },
  async created() {
    this.id = this.$route.params.id
    // 仓库编码的回显
    if (this.id === 'null') return
    const res = await addFactory()
    this.formInline.code = res.data
    this.area()
  },
  methods: {
    changeMax(val) {
      this.formInline.status = this.radioPay.find(
        (item) => item.label === this.val
      ).value
      console.log(this.formInline.status)
    },

    // 点击编辑传入id
    // 调用接口
    // 实现数据回显
    async area() {
      const res = await allFactory({ status: 1 })
      this.houseName = res.data.data
      this.warehouseId
      if (this.id === null) return
      console.log(this.id)
      const { data } = await aclearHouse(this.id)
      this.formInline = data
    },

    // 提交
    // 声明提交事件
    // 对表单进行校验
    // 封装接口引入接口
    // 判断：
    // 如果跳转页面携带id，是编辑仓库
    // 调用接口实现数据回显
    // 如果跳转页面不携带id，是添加仓库
    // 调用添加接口
    // 对城市下拉数据进行处理
    // 筛选出市级区号区级区号、城市文本值
    // 点击提交对表单进行兜底校验
    // 操作成功、提示用户
    // 返回主页面、清空表单
    onSubmit() {
      console.log(this.$route.params.id)
      this.$refs.departRef.validate(async(vaild) => {
        if (!vaild) return Message.warning('请将表单填写完整')
        if (this.id !== null) {
          await addHouse(this.formInline)
          Message.success('添加成功')
          this.$router.go(-1)
        } else {
          await clickHouse(this.formInline)
          Message.success('编辑成功')
          this.$router.go(-1)
        }
      })
    },

    // 返回主页面
    // 清空表单、表单校验
    callBackFn() {
      this.$refs.departRef.resetFields()
      this.$router.back()
      this.click()
    },

    // 清空表单方法
    click() {
      this.formInline = {
        code: '',
        warehouseId: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        personName: '',
        phone: ''
      }
    }
  }
}
</script>

<style>
.el-form-item{
  margin-right: 22px;
}
.el-input__inner {
    background: #f1ecec;
    border-radius: 6px;
    margin-right: 10px;
  }
</style>

<style scoped>
.app-container{
  overflow: hidden;
  height: 100%;
  background-color: #f1ecec;
  padding: 0px 20px;
}
.pannel{
   margin: 20px 0;
    padding: 20px 25px 1px;
    border-radius: 10px;
    background-color: #fff;
}
 .button {
      display: flex;
      border-top: 1px solid #f1ecec;
      padding: 14px 220px 0;
    }
    .tac{
      margin: 0 auto;

    }
     .tac .el-button {
        border-radius: 40px;
        color: black;
        margin-right: 17px;
        margin-top: 4px;
        height: 38px;
        line-height: 7px;
        width: 170px;
      }
</style>
